import React, { ChangeEvent } from 'react';
import { observer } from 'mobx-react-lite';
import loginStore from '@/store/login';

const UploadImg = observer(() => {
    /*
  上传图片，并将图片地址存到redux，保留状态
   */
    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
        try {
            const formdata = new FormData();
            if (event.target.files) {
                formdata.append('file', event.target.files[0]);
                loginStore.uploadImg({ data: formdata });
            }
        } catch (err) {
            // console.error(err);
        }
    };

    return (
        <div className='upload-img-con'>
            <p className='common-title'>请上传头像</p>
            <div className='file-lable'>
                <span className='common-select-btn'>上传头像</span>
                <input type='file' onChange={onChange} />
            </div>
            <img src={loginStore.imgpath} className='select-img' alt='' />
        </div>
    );
});

export default UploadImg;
